<template>
  <div class="map">
    <div id="container"></div>
  </div>
</template>
<script>
import { getMap } from '@/utils/map'
import { getEl } from '@/utils'
import demo from '@/components/hooks/demo.vue'

export default {
  data() {
    return {
      AMap: null
    }
  },
  async mounted() {
    let AMap = await getMap()
    let map = new AMap.Map('container', {
      center: [107.943579, 30.131735],
      zoom: 7
      // zoomEnable: false,
      // dragEnable: false
    })
    this.$api.axios('https://a.amap.com/jsapi_demos/static/geojson/chongqing.json').then((res) => {
      let geo = new AMap.GeoJSON({
        geoJSON: res,
        getPolygon: (geojson, lnglats) => {
          // 计算面积
          var area = AMap.GeometryUtil.ringArea(lnglats[0])
          return new AMap.Polygon({
            extData: geojson.properties.id,
            path: lnglats,
            fillColor: '#ccc',
            strokeColor: 'yellow',
            strokeOpacity: 1,
            strokeWeight: 1,
            cursor: 'pointer'
          })
        }
      })
      geo.on('click', (e) => {
        console.log(e)
      })
      var marker = new AMap.Marker({
        position: new AMap.LngLat(107.943579, 30.131735),
      })
      var marker2 = new AMap.Marker({
        position: new AMap.LngLat(105.05, 30.131),
      })
      // map.add(marker)
      geo.addOverlays([marker, marker2])
      let arr = geo.getOverlays()
      let el=getEl(demo)
      arr.map((item, i) => {
        console.log(item);
        // if (i == 2) geo.removeOverlay(item)
        item.on('click', ({lnglat}) => {
          open(lnglat)
        })
      })

      var infoWindow = new AMap.InfoWindow({
        //创建信息窗体
        isCustom: true, //使用自定义窗体
        content: `<div>国家超级计算广州中心越秀分中心<br></div>`,
        content: el,
        offset: new AMap.Pixel(0, -25)
      })
      const open = (data) => {
        infoWindow.open(map, [data.lng, data.lat]) //打开信息窗体
      }
      function close() {
        map.clearInfoWindow()
      }

      let geo2 = new AMap.GeoJSON({
        geoJSON: res,
        getPolygon: (geojson, lnglats) => {
          // 计算面积
          return new AMap.Polygon({
            zIndex: 4,
            path: lnglats,
            fillColor: 'transparent',
            strokeColor: 'lightblue',
            strokeOpacity: 1,
            strokeWeight: 9,
            cursor: 'pointer',
            click: function () {
              console.log(134)
            }
          })
        }
      })
      geo.setMap(map)
      geo2.setMap(map)
    })
  }
}
</script>
 
<style lang="less" scoped>
.map {
  width: 100%;
  height: 500px;
  div {
    width: 100%;
    height: 100%;
  }
}

.sb {
  width: 500px !important;
  height: 300px !important;
  background: lightblue;
  position: relative;
  div {
    width: auto;
    height: auto;
  }
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #000;
    cursor: pointer;
    font-size: 24px;
  }
}
</style>